<template>
    <div class="dialog-box">
        <el-dialog class="dialog" v-model="visible" title="赠金币/券" top="80px" draggable overflow
            :close-on-click-modal="false" :close-on-press-escape="false" :show-close="false">
            <template #header="{ close, titleId, titleClass }">
                <div class="my-header">
                    <div class="action">
                        <div class="action-item" v-for="(v, k) in tabBtnList" :key="k" @click="handleAction(v, k)"
                            :class="{ active: active == v.value, none: v.value == '', disabled: v.isCanUse == '0' }">
                            {{ v.value }}
                        </div>
                    </div>
                </div>
            </template>
            <el-divider class="my-divider" />

            <SendCoin v-if="active == '金币充值'" @emitCancel="emitEditCancel" @emitSubmit="emitEditSubmit" />

            <SendTicket v-if="active == '赠券发放'" @emitCancel="emitEditCancel" @emitSubmit="emitEditSubmit" />



        </el-dialog>
    </div>
</template>
  
<script setup>
import { ref } from "vue";
import Api from '@/api'
import SendTicket from './send_ticket.vue'
import SendCoin from './send_coin.vue'

const props = defineProps({
    visible: {
        type: Boolean,
        required: false,
    },
})
const visible = toRef(props, 'visible')


// -------------------------顶部按钮-----------------------------
const tabBtnList = ref([
    { value: '金币充值', isCanUse: '1' },
    { value: '赠券发放', isCanUse: '1' },
])
const active = ref('金币充值')
// 切换赠金币/券
const handleAction = (v, k) => {
    if (v.isCanUse == '0') return
    active.value = v.value
}


const open = (name) => {
    console.log('name :>> ', name);
    if (name == 'queue') {
        active.value = '赠券发放'
        tabBtnList.value.forEach(item => {
            if (item.value != '赠券发放') {
                item.isCanUse = '0'
            }
        })
    }
}
// 暴露方法
defineExpose({ open })

// 取消
const emit = defineEmits(['emitCancel', 'emitSubmit'])
const emitEditCancel = (params) => {
    emit('emitCancel',)
}
// 确认
const formRef = ref()
const emitEditSubmit = (params) => {
    emit('emitSubmit')
}



</script>
  
<style  lang="scss" scoped>
    @import '@/styles/com_style_input.css';
.dialog-box {
    ::v-deep {
        .el-dialog {
            // width: 1000px;
            border-radius: 16px;
        }

        .el-form-item__label {
            // line-height: 40px;
            font-family: Microsoft YaHei;
            font-weight: 400;
            font-size: 16px;
            color: #212121;
        }

        .el-date-editor {
            // width: 350px;

        }

        .el-input {
            // width: 230px;
        }

        .el-input__wrapper {
            // height: 40px;
            background: #FAFAFA;
            border-radius: 8px;
        }

        .el-select__wrapper {
            // width: 160px;
            // height: 40px;
            background: #FAFAFA;
            border-radius: 8px;
        }
    }
}

.my-divider {
    margin: 0;
}


.action {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    // justify-content: space-between;
    // padding: 10px 0px 0px;
    // margin-bottom: 30px;

    .action-item {
        // width: 208px;
        // flex: calc(25% - 16px);
        /* 计算每个子元素的宽度，减去 margin */
        height: 48px;
        line-height: 48px;
        width: 128px;
        text-align: center;
        background: #E6E6E6;
        border-radius: 8px;
        font-family: Microsoft YaHei;
        font-weight: 400;
        font-size: 16px;
        color: #666666;
        margin-right: 20px;
        cursor: pointer;

        &.active {
            background: #FFE566;
            color: #212121;
        }

        &.disabled {
            background: #F2F2F2;
            border-radius: 8px;
            color: #CCCCCC;
        }

        &.none {
            background: #FFFFFF;
        }
    }
}
</style>
  